<template>
  <el-dialog title="新增项目" :visible.sync="isShow" :close-on-click-modal="false" destroy-on-close width="30%">
    <div class="form">
      <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="80" size="small">
        <el-row :gutter="10">
          <el-col :span="12">
            <quick-field-panel title="渠道" required>
              <el-form-item prop="channel">
                <channel-select v-model="form.channel" />
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="编号" required>
              <el-form-item prop="no">
                <el-input v-model="form.no" placeholder="请输入编号" clearable />
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <quick-field-panel title="项目" required>
              <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入项目名称" clearable />
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="负责人" required>
              <el-form-item prop="leader">
                <employee-select v-model="form.leader" />
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <quick-field-panel title="客户" required>
              <el-form-item prop="customer_id">
                <customer-select v-model="form.customer_id" />
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="阶段" required>
              <el-form-item prop="stage">
                <stage-select v-model="form.stage" />
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <quick-field-panel title="计划开始时间" required>
              <el-form-item prop="begin_date">
                <el-date-picker v-model="form.begin_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                  :picker-options="{
                    disabledDate: (time) => this.form.end_date && time.getTime() >= new Date(this.form.end_date).getTime()
                  }" />
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="计划完成时间" required>
              <el-form-item prop="end_date">
                <el-date-picker v-model="form.end_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                  :picker-options="{
                    disabledDate: (time) => this.form.begin_date && time.getTime() < new Date(this.form.begin_date).getTime() - 86400000
                  }" />
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>
        <quick-field-panel title="优先级" required>
          <el-form-item prop="priority">
            <el-input v-model="form.priority" placeholder="优先级" clearable />
          </el-form-item>
        </quick-field-panel>

        <quick-field-panel title="备注">
          <el-form-item prop="remark">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" :rows="4" clearable />
          </el-form-item>
        </quick-field-panel>
      </el-form>
    </div>
    <span slot="footer">
      <el-button type="primary" :loading="loading" size="medium" @click="doAdd">确 定</el-button>
      <el-button size="medium" plain @click="isShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import _api from "../../common/api/project";
import ChannelSelect from '../Common/ChannelSelect.vue';
import EmployeeSelect from '../Common/EmployeeSelect.vue';
import StageSelect from '../Common/StageSelect.vue';
import CustomerSelect from '../Common/CustomerSelect.vue';

export default {
  components: { StageSelect, ChannelSelect, EmployeeSelect, CustomerSelect },

  data() {
    return {
      loading: false,
      isShow: false,
      form: {},
      rules: {
        name: [{ required: true, message: "必填", trigger: "blur", },],
        customer_id: [{ required: true, message: "必填", trigger: "blur", },],
        channel: [{ required: true, message: "必填", trigger: "change", },],
        no: [{ required: true, message: "必填", trigger: "blur", },],
        leader: [{ required: true, message: "必填", trigger: "blur", },],
        begin_date: [{ required: true, message: "必填", trigger: "blur", },],
        end_date: [{ required: true, message: "必填", trigger: "blur", },],
        stage: [{ required: true, message: "必填", trigger: "blur", },],
        priority: [{ required: true, message: "必填", trigger: "blur", },],
      }
    };
  },

  methods: {
    showDialog() {
      this.form = {};
      this.isShow = true;
    },

    async doAdd() {
      this.loading = true;
      try {
        await this.$refs.form.validate(async (valid) => {
          if (valid) {
            await _api.addAsync(this.form);
            this.isShow = false;
            this.$emit("added", {});
          }
        });
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() { },
};
</script>

<style lang="scss" sooped>
.avatar-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0;
}

.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader .el-upload .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
